<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惰性函数和性能</title>
</head>

<body>
    <button id="btn">Add</button>
</body>
<script>
    var btn = document.getElementById('btn')
        // 点击事件处理
    function foo() {
        console.log(this);
    }
    // 兼容点击事件处理
    function addEvent(obj, type, fn) {
        if (obj.addEventListener) { //原生
            obj.addEventListener(type, fn, false)
        } else if (obj.attachEvent) { //ie8浏览器兼容
            obj.attachEvent('on' + type, fn)
        } else {
            obj['on' + type] = fn
        }
    }
    addEvent(btn, 'click', foo)

    // 惰性函数
    function addEvent(obj, type, fn) {
        if (obj.addEventListener) { //原生
            addEvent = obj.addEventListener(type, fn, false)
        } else if (obj.attachEvent) { //ie8浏览器兼容
            addEvent = obj.attachEvent('on' + type, fn)
        } else {
            addEvent = obj['on' + type] = fn
        }
        return addEvent
    }
    addEvent(btn, 'click', foo)

    // jsbench.me ：方法一》方法二，方法二蒋所有的情况的返回值都交给一个函数去处理，再次进来不需要判断直接获取函数的返回值即可，方法一是针对不同情况做判断
</script>

</html>